<template id="tempalte-home">
  <div class="header">
    	<div class="nav-icon">
    		<img class="logo" src="../assets/img/fontlogo.jpg"/>
    	</div>
      <div :class="bot">
    	 <div @click="select" class="nav-div nav-item">
    	 	<a class="href-home" href="#/">首 页</a><i class="iconfont icon-jiantou1"></i>
    	 </div>
    	 <div @click="select" class="nav-div nav-item">
        <a class="href-product" href="#/product">产 品 简 介</a><i class="iconfont icon-jiantou1"></i>
       </div>
       <div @click="select" class="nav-div nav-item">
        <a class="href-service" href="#/service">技 术 服 务</a><i class="iconfont icon-jiantou1"></i>
       </div>
       <div @click="select" class="nav-div nav-item">
        <a class="href-information" href="#/information/page/1">智 能 资 讯</a><i class="iconfont icon-jiantou1"></i>
       </div>
       <div @click="select" class="nav-div nav-item">
        <a class="href-company" href="#/company">公 司 介 绍</a><i class="iconfont icon-jiantou1"></i>
       </div>
       <div @click="select" class="nav-div nav-item">
        <a class="href-manager" href="#/step">健 身 管 理</a><i class="iconfont icon-jiantou1"></i>
       </div>
       <div class="block"></div>
    	</div>
    	<div class="nav-right nav-item" @click="menu">
    		 <span>{{crttxt}}</span>
        <div :class="menuselect">
          <i class="m1"></i>
          <i class="m2"></i>
          <i class="m3"></i>
        </div>
    	</div>
    </div>
  </div>
</template>
<script>
	export default {
	id:'template-header',
  name: 'header',
  data(){
    return{
      crttxt:"",
      bot:"nav nav-item",
      menuselect:"menu-icon",
      canclose:false
    }
  },
  methods:{
    select(event){
      var crt = event.currentTarget.childNodes[0].innerHTML;
      this.crttxt = crt;
      this.menu();
//    moveback(true);
    },menu(){
      console.log("menu");
      var t= this;
      if(t.bot=="nav nav-item expand"){
        t.bot="nav nav-item"
        t.menuselect="menu-icon";
        t.canclose = false;          
      }else{
        t.menuselect="menu-icon selecting"
        t.bot= "nav nav-item expand";
        setTimeout(function(){
          t.canclose = true;          
        },100);
      }
    }
  },
  mounted(){
    var t = this;
    $(document).on("click",function(e){
      if(!$(e.target).hasClass("nav-item")){
        if(t.canclose==true){
            t.menu();          
        }
      }
    })
  },
  beforeach(to,from,next){
    var t = this;
    if(t.bot=="nav expand"){
      t.menu();
    }
    setTimeout(function(){
      next();      
    },100)
  },
  created(){
    var t= this;
    window.onload=function(){
      $(".nav").height($(document).height());
      var start = location.href.indexOf("#")+1;
      var hash = location.href.substr(start,location.href.length-start);
      var current="";
      if(hash=="/product"){
        current=$(".href-product")
      }else if(hash=="/service"){
        current=$(".href-service")
      }else if(hash=="/information/page/1"){
        current=$(".href-information")
      }else if(hash=="/company"){
        current=$(".href-company")
      }else if(hash=="/step"){
        current=$(".href-manager")
      }else{
        current=$(".href-home")
      }
      current.addClass("selected");
      t.crttxt = current.text();
    }
  }
}
</script>
<style scoped>
  .menu-icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin:25px 0 0 10px;
  }
  .nav.expand{transform: translate(0,64px);}
  .menu-icon i{transition: all .5s; border-radius: 2px; border: solid 1px #888;display: inline-block;width: 20px;height: 0;float: left;margin-bottom: 4px;}
  .selecting .m1{transform: rotate(40deg) translate(4px,-1px); width: 12px;}
  .selecting .m2{transform: translateX(-6px);}
  .selecting .m3{transform: rotate(-40deg) translate(4px,1px); width: 12px;}
.header{
  height: 64px;
  width: 100%;
  z-index: 1000;
  padding: 10px 15px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  background: white;
  box-shadow: 0 1px 5px #999;
}
.logo{height:40px;}
.nav{  transition: all .5s;
  box-shadow: -2px 1px 5px #999 inset;
  z-index: 0;margin-top: -10px;
  right: -5px;
  box-sizing: border-box;
  background: white;
  position: absolute;
  display: inline-block;
  width: 65%; transform: translate(100%,64px);
}
.nav-div i{position:absolute; display: inline-block;right: 15px;top: -2px;color:#888;font-size: 20px;}
.nav >.nav-div{
  position: relative;
  text-align: left;
  box-sizing: border-box;
  padding-left: 30px;
  line-height: 60px;
  display: inline-block;
  width: 100%;
}
.nav >.nav-div:hover{
  background: #36BEF0;
}
  .nav >.nav-div:hover a{
    color: white;
  }
  .nav-right{
    text-align: right;
    box-sizing: border-box;
    padding-right: 15px;
    width: 140px;
    color: #888888;
    line-height: 64px;
    font-size: 16px;
    position: absolute;
    top:0;
    right: 0;
  }
  .nav-right span{display: inline-block;vertical-align: top;}
.nav-icon{
  float: left;
  width: 30%; 
  text-align: center;
}
a{
  display: block;
  width: 100%;
  text-align: left;
  font-size: 16px;
  color: #888888;
  text-decoration: none;
}
.block{
  position: absolute;
  top: 62px;
  border-bottom: solid 2px white;
}
.inblock{display: inline-block;width: 40px;height: 64px;margin-top: -5px;}
</style>